import React,{useEffect, useRef} from 'react'
import { ajax } from '../../api'
import {Row,Col,Form,Input,Button,Typography,  Select } from "antd" 
import { withRouter } from "react-router-dom";
import {inject, observer} from "mobx-react"
import myinfo from '../../mobx/info';
import * as echarts from "echarts"
import { roleList } from '../../utils/commom';
const {Title} = Typography
 function Fenxi(props:any) {
    const {userList,getUserListAsync} = myinfo
   
    useEffect(()=>{
        charIninOne()
        getUserListAsync({})
        console.log(userList);
        
        setTimeout(()=>{
            charInitTwo()
        },1000)
    },[])

    const charOne:any = useRef()
    const charTwo:any = useRef()
    const charInitTwo = ()=>{
        var myChart = echarts.init(charTwo.current);
        var data = roleList.map((item:any)=>{
            item.name = item.text
            item.value = userList.filter((v:any)=>v.role==item.id).length
            return item
        })
        console.log(data);
        
        var option = {
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '人员比例',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: data
              }
            ]
        };
        myChart.setOption(option)
    }
    const charIninOne= ()=>{
    var myChart = echarts.init(charOne.current);
    // 指定图表的配置项和数据  参数配置项 
    var option = {
        title: {
        text: 'W-Y-W 犯错次数'
        },
        tooltip: {},
        legend: {
        data: ['次数']
        },
        xAxis: {
        data: ['小李', '小王', '小池', '小燚', '小东',]
        },
        yAxis: {},
        series: [
        {
            name: '次数',
            type: 'bar',
            data: [8, 0, 15, 7, 0]
        }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    }
    return (
        <div>
           <Title level={2}> 用户数据分析 </Title>   
           <Row>
               <Col span={11}>
               <div ref={charOne} className="ebox"style={{padding:12,width:'100%',height:440,border:'1px solid #ddd',borderRadius:"10px"}} id="chartone"></div>
               </Col>
               <Col span={11}>
               <div ref={charTwo} className="ebox"style={{padding:12,width:'100%',height:440,border:'1px solid #ddd',borderRadius:"10px"}} id="chartone"></div>
               </Col>
           </Row>
        </div>
    )
}

export default inject('info')(withRouter(observer(Fenxi)))